<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/iconfont.css">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/common.css">
    <link href="__PUBLIC__/asset/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <link href="__PUBLIC__/asset/lib/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <title>{:L('contact_title')}</title>
    <style>
        /* 头部信息 */
        .contact-title-box {
            background-color: #fafafa;
            padding: 10vh 0;
        }

        .contact-title {
            font-size: calc(50px + 0.1vw);
            margin-bottom: 10px;
        }

        .info-left,
        .info-right {
            font-size: calc(16px + 0.1vw);
            color: var(--geryColor);
        }

        .link-list img {
            width: 30px;
        }

        .phone-img {
            width: 25px;
            margin: 10px 0;
        }

        /* 联系表单 */
        .contact-form-box {
            padding: 10vh;
        }

        .contact-form-title {
            font-size: calc(50px + 0.1vw);
            margin-bottom: 5vh;
        }

        .contact-form {
            width: 80%;
            margin: 0 auto;
            /* background-color: red; */
        }

        /* 表单表格 */
        /* input */
        .form-input {
            font-size: calc(20px + 0.1vw);
            margin-bottom: 5vh;
        }

        .form-input input {
            width: 100%;
            outline: none;
            border: none;
            border-bottom: 1px solid black;
        }

        .form-input label,
        .form-input select {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-weight: normal;
        }

        .form-input select {
            border: none;
            border-bottom: 1px solid black;
            outline: none;
            background-color: transparent;
        }

        /* checked */
        .form-check-title {
            font-size: calc(20px + 0.1vw);
            margin: 3vh 0;
        }

        .check-item-title {
            font-size: calc(16px + 0.1vw);
            margin: 20px 0;
            color: black;
        }

        .form-check-list label {
            margin-bottom: 20px;
            font-size: calc(16px + 0.1vw);
            line-height: calc(16px + 0.1vw);
            color: var(--geryColor);
            font-weight: normal;
            font-family: "Microsoft Yahei", "PuHu";
            cursor: pointer;
        }

        .form-check-list select {
            width: 100%;
        }

        input[type="checkbox"] {
            margin-right: 10px;
            width: calc(16px + 0.1vw);
            height: calc(16px + 0.1vw);
            vertical-align: bottom;
        }

        .contact-form button {
            margin: 5vh 0;
            width: 20%;
            padding: 15px 0;
            background-color: var(--themeColor);
            color: white;
            border: none;
            font-size: calc(16px + 0.1vw);
        }

        .contact-form button i {
            font-size: 0;
            transition: all .3s;
            margin-left: 4px;
        }

        .contact-form button:hover i {
            font-size: calc(14px + 0.1vw);
        }

        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        @media screen and (max-width:1400px) {
            .middle-box {
                padding: 20px;
            }
        }

        @media screen and (max-width:1024px) {
            form div:nth-child(8) {
                margin-top: 10vh;
            }

            .contact-title-box {
                padding: 5vh 0;
            }

            .info-right {
                margin: 0 !important;
            }
        }

        @media screen and (max-width:768px) {
            .contact-box {
                margin-top: 7rem;
            }

            .contact-title,
            .contact-form-title {
                font-size: calc(30px + 1vw);
            }

            .contact-title-box {
                padding: 5vh 0 0;
            }

            .info-right {
                margin: 20px 0;
            }

            .info-right-right,
            .info-right-left {
                padding: 0;
                margin-bottom: 40px;
            }

            /* 表单 */
            .contact-form {
                width: 100%;
            }

            .form-input {
                margin-bottom: 4vh;
            }

            .input-title {
                font-size: calc(18px + 1vw);
                line-height: 20px;
            }

            .form-input,
            .form-check,
            .col-lg-12 {
                padding: 0;
            }

            .contact-form button {
                width: 30%;
                padding: 10px 0;
            }

            .contact-form button i {
                font-size: calc(14px + 0.1vw);
            }
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="contact-box">
        <div class="common-top wow fadeInUp">
            <img src="__PUBLIC__/asset/image/contact/top.jpg" alt="">
        </div>
        <div class="contact-title-box">
            <div class="middle-box">
                <div class="contact-title wow fadeInUp">{:L('contact_content_1')}</div>
                <div class="contact-info row">
                    <div class="info-left col-sm-6 wow fadeInUp">{:L('contact_content_2')}</div>
                    <div class="info-right col-lg-5 col-sm-6 col-lg-offset-1 row wow fadeInUp" data-wow-delay="0.3s">
                        <div class="info-right-left col-md-5">
                            <div>{:L('contact_content_3')}</div>
                            <div>
                                <img src="__PUBLIC__/asset/image/contact/phone.png" alt="" class="phone-img">
                                <span>{:L('contact_content_4')}</span>
                            </div>
                            <div class="link-list row">
                                <a href="" class="col-sm-3"><img src="__PUBLIC__/asset/image/contact/icon.png" alt=""></a>
                                <a href="" class="col-sm-3"><img src="__PUBLIC__/asset/image/contact/icon2.png" alt=""></a>
                                <a href="" class="col-sm-3"><img src="__PUBLIC__/asset/image/contact/icon3.png" alt=""></a>
                                <a href="" class="col-sm-3"><img src="__PUBLIC__/asset/image/contact/icon4.png" alt=""></a>
                            </div>
                        </div>
                        <div class="info-right-right col-md-7">
                            <div>{:L('contact_content_5')}</div>
                            <div>
                                <img src="__PUBLIC__/asset/image/contact/phone.png" alt="" class="phone-img">
                                <span>{:L('contact_content_6')}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact-form-box middle-box">
            <div class="contact-form-title wow fadeInUp">
                {:L('contact_content_7')}<br>{:L('contact_content_8')}
            </div>
            <div class="contact-form row wow fadeInUp">
                <form id="contactForm">
                    <div class="form-input col-lg-5">
                        <label>
                            <div class="input-title">{:L('contact_content_9')}</div>
                            <input type="text" placeholder="" name="firstname">
                        </label>
                    </div>
                    <div class="form-input col-lg-5 col-lg-offset-2">
                        <label>
                            <div class="input-title">{:L('contact_content_10')}</div>
                            <input type="text" placeholder="" name="lastname">
                        </label>
                    </div>
                    <div class="form-input col-lg-5">
                        <label>
                            <div class="input-title">{:L('contact_content_11')}</div>
                            <input type="text" placeholder="" name="email">
                        </label>
                    </div>
                    <div class="form-input col-lg-5 col-lg-offset-2">
                        <label>
                            <div class="input-title">{:L('contact_content_12')}</div>
                            <input type="text" placeholder="" name="company">
                        </label>

                    </div>
                    <div class="form-input col-lg-5">
                        <label>
                            <div class="input-title">{:L('contact_content_13')}</div>
                            <input type="text" placeholder="" name="work">
                        </label>
                    </div>
                    <div class="form-input col-lg-5 col-lg-offset-2">
                        <label>
                            <div class="input-title">{:L('contact_content_14')}</div>
                            <input type="number" placeholder="" name="tel">
                        </label>
                    </div>
                    <!-- <div class="form-input col-lg-5">
                        <label>
                            <div class="input-title">国家/地区</div>
                            <select id="countrySelect" name="City">
                            </select>
                        </label>
                    </div> -->
                    <div class="form-check col-lg-12 wow fadeInUp">
                        <div class="form-check-title">{:L('contact_content_15')}</div>
                        <div class="from-check-item">
                            <div class="check-item-title">{:L('header_menu_1')}</div>
                            <div class="form-check-list row ">
                                <label class="col-lg-6"><input type="checkbox" name="server[]" id=""
                                        value="AWS">{:L('header_menu_1_1')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="server[]" id=""
                                        value="Azure">{:L('header_menu_1_2')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="server[]" id=""
                                        value="Cloudflare">{:L('header_menu_1_3')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="server[]" id=""
                                        value="Google Cloud">{:L('header_menu_1_4')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="server[]" id=""
                                        value="Alibaba Cloud">{:L('header_menu_1_5')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="server[]" id=""
                                        value="Tencent Cloud">{:L('header_menu_1_6')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="server[]" id=""
                                        value="Huawei Cloud">{:L('header_menu_1_7')}</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-check col-lg-12 wow fadeInUp">
                        <div class="from-check-item">
                            <div class="check-item-title">{:L('header_menu_2')}</div>
                            <div class="form-check-list row ">
                                <label class="col-lg-6"><input type="checkbox" name="cdn[]" id=""
                                        value="AWS">{:L('header_menu_2_1')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="cdn[]" id=""
                                        value="Google Cloud">{:L('header_menu_2_2')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="cdn[]" id=""
                                        value="Azure">{:L('header_menu_2_3')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="cdn[]" id=""
                                        value="Alibaba Cloud">{:L('header_menu_2_4')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="cdn[]" id=""
                                        value="Tencent Cloud">{:L('header_menu_2_5')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="cdn[]" id=""
                                        value="Huawei Cloud">{:L('header_menu_2_6')}</label>
                                <label class="col-lg-6"><input type="checkbox" name="cdn[]" id=""
                                        value="Cloudflare">{:L('header_menu_2_7')}</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 wow fadeInUp">
                        <button type="submit"><span>{:L('contact_content_17')}</span><i class="iconfont icon-youshuangjiantou"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</body>

</html>
<script src="__PUBLIC__/asset/lib/bootstrap/bootstrap.js"></script>
<script src="__PUBLIC__/asset/lib/wow/wow.min.js"></script>
<script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
<script src="__PUBLIC__/asset/js/common.js"></script>
<script>
    new WOW().init()
    $(document).ready(function () {

        // 提交form表单处理逻辑
        $('#contactForm').submit(function (e) {
            var formData = $(this).serialize()
            console.log(formData);
            $.ajax({
                url:'{:U("submit")}',
                data:formData,
                dataType:'json',
                type:'post',
                success:function(resp){
                    alert(resp.msg);
                }
            });

            e.preventDefault()
        })

        // 添加国家options元素
        // $('#countrySelect').append('<option value="CN">中国</option><option value="USA">美国</option><option value="JP">日本</option><option value="FC">法国</option><option value="UK">英国</option>')
    })
</script>